<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" :style="{'min-height': containerHeight + 'px'}">
            <el-row>
                <el-col :span="2">
                    <el-checkbox border v-model="collapsable">折叠节点</el-checkbox>
                </el-col>
                <el-col :span="2">
                    <el-checkbox border v-model="horizontal">垂直展示</el-checkbox>
                </el-col>
                <el-col :span="2">
                    <el-checkbox border v-model="expandAll" @change="expandChange">展示全部</el-checkbox>
                </el-col>
                <!-- <el-col :span="2">
                    <el-checkbox border v-model="isShowNo" @change="isShow">展示部门编号</el-checkbox>
                </el-col>-->
            </el-row>

            <Vue2OrgTree
                :props="defaultProps"
                :data="data"
                :horizontal="horizontal"
                :label-class-name="labelClassName"
                :collapsable="collapsable"
                :render-content="renderContent"
                @on-expand="onExpand"
                @on-node-click="onNodeClick"
            ></Vue2OrgTree>
        </div>
    </div>
</template>
<script>
import appMain from '../../../utils/app_main';
export default {
    data() {
        return {
            pageTitle: '',
            containerHeight: '',
            data: {
                id: 0,
                name: 'XXX科技有限公司',
                children: [
                    {
                        id: 2,
                        name: '产品研发部',
                        children: [
                            {
                                id: 5,
                                name: '研发-前端'
                            },
                            {
                                id: 6,
                                name: '研发-后端'
                            },
                            {
                                id: 9,
                                name: 'UI设计'
                            },
                            {
                                id: 10,
                                name: '产品经理'
                            }
                        ]
                    },
                    {
                        id: 3,
                        name: '销售部',
                        children: [
                            {
                                id: 7,
                                name: '销售一部'
                            },
                            {
                                id: 8,
                                name: '销售二部'
                            }
                        ]
                    },
                    {
                        id: 4,
                        name: '财务部'
                    },
                    {
                        id: 9,
                        name: 'HR人事'
                    }
                ]
            },
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id',
                expand: 'expand'
            },
            collapsable: true,
            expandAll: true,
            horizontal: false,
            isShowNo: false,
            labelClassName: 'bg-color-blue'
        };
    },
    created() {
        this.getTree();
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
        // console.log(this.$router, 'router')
    },
    methods: {
        isShow() {
            this.isShowNo = !this.isShowNo;
        },
        expandChange() {
            this.toggleExpand(this.data, this.expandAll);
        },
        //展示内容
        renderContent(h, data) {
            if (this.isShowNo === false) {
                return data.name;
            } else {
                return data.orgNo + '/' + data.name;
            }
        },
        //收起
        collapse(list) {
            console.log('collapse', list);
            var _this = this;
            list.forEach(function(child) {
                if (child.expand) {
                    child.expand = false;
                }
                child.children && _this.collapse(child.children);
            });
        },
        onExpand(e, data) {
            console.log('onExpand', data);
            console.log('onExpand e', e);
            if ('expand' in data) {
                data.expand = !data.expand;
                if (!data.expand && data.children) {
                    this.collapse(data.children);
                }
            } else {
                this.$set(data, 'expand', true);
            }
        },
        //自动展开
        toggleExpand(data, val) {
            var _this = this;
            if (Array.isArray(data)) {
                data.forEach(function(item) {
                    _this.$set(item, 'expand', val);
                    if (item.children) {
                        _this.toggleExpand(item.children, val);
                    }
                });
            } else {
                this.$set(data, 'expand', val);
                if (data.children) {
                    _this.toggleExpand(data.children, val);
                }
            }
        },
        onNodeClick(e, data) {
            // alert(data.id);
            // this.$router.push({
            //     path: '/employeeList', //跳转的路径
            //     query: { id: data.id }
            // });
        },
        // 获取树的数据
        getTree() {
            appMain
                .organizationList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.data = res.data.data[0];
                        this.toggleExpand(this.data, true);
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }
    }
};
</script>
<style  scoped>
.container {
    width: 100%;
    text-align: center;
}
.bg-color-blue {
    color: #fff;
    background-color: rgb(51, 118, 205) !important;
}
</style>